<template>
	<!-- 收货地址 -->
	<view class="address_main">
		<view class="addres_list_main">
			<view class="addres_list" v-for="(item, index) in addressList" :key="index">
				<view class="consignee_info flex flex-pack-justify">
					<text>收货人：{{item.name}}</text>
					<text>{{item.mobile}}</text>
				</view>
				<view class="consignee_address" @click="handleToAddressDetails(item)">
					{{item.area}}{{item.address}}
				</view>
				<view class="operation">
					<view class="set_default_address">
						<view class="">
							<image
								@click="setDefaultAddress(item.id, 1)"
								v-if="item.type == 2"
								src="/static/image/addressUnselect.png" mode=""
							/>
							<image
								@click="setDefaultAddress(item.id, 2)"
								src="/static/image/addressChecked.png"
								v-if="item.type == 1"
								mode=""
							/>
						</view>
						
						<text :class="item.type == 1 ? 'text-color': '' ">默认地址</text>
						
					</view>
					<view class="operation-right">
						<view class="edit_address flex" @click="handleToUpdateAddress(item)">
							<image src="../../../static/image/addressEdit.png" mode="">
								<text>编辑</text>
						</view>
						<view class="delete_address fr flex" @click="handleShowDelDialog(item.id)">
							<image src="../../../static/image/addressDelete.png" mode="">
							<text>删除</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="btns1" @click="handleToAddAddress()">
			新增地址
		</view>
		<view class="putaway_commodity" @touchmove.stop.prevent="moveHandle" v-show="dialogShow">
			<view class="putaway_commodity_main">
				<view class="putaway_commodity_explain">
					确认要删除此地址吗?
				</view>
				<view class="putaway_commodity_btns">
					<text @click="handlePutawayCommodity">取消</text>
					<text @click="handleDelAddress">确认</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialogShow: false, // 是否显示删除弹框
				addressList: [], // 地址列表
				delId: '', // 删除id
			}
		},
		onLoad() {
			this.getAddressList();
		},
		methods: {
			/** 获取地址列表 */
			getAddressList() {
				this.$post(this.api.getAddressList, {}, 'post', { token: uni.getStorageSync('token') }).then((res) => {
					console.log(res)
					this.addressList = res.data;
				}).catch((err) => {
					console.log(err)
				})
			},
			/** 默认地址设置 */
			setDefaultAddress(id, type) {
				let parameter = {
					id: id, // id
					type: type, // type 1：是，2：否
				}
				this.$post(this.api.setDefaultAddress, parameter, 'post', { token: uni.getStorageSync('token') }).then((res) => {
					/** 刷新列表 */
					this.getAddressList();
				}).catch((err) => {
					console.log(err)
				})
			},
			// 跳转至新增地址页面
			handleToAddAddress() {
				uni.navigateTo({
					url:'../addAddress/index?btn=2&formInline=null'
				})
			},
			/** 跳转至编辑地址页面 */
			handleToUpdateAddress(item) {
				uni.navigateTo({
					url:`../addAddress/index?btn=1&formInline=${JSON.stringify(item)}`
				})
			},
			/** 取消删除 */
			handlePutawayCommodity() {
				this.dialogShow = false;
			},
			/** 遮罩层穿透，阻止底部滑动 */
			moveHandle() {
				return;
			},
			/** 打开删除弹框 */
			handleShowDelDialog(id) {
				this.dialogShow = true;
				this.delId = id;
			},
			/** 删除地址 */
			handleDelAddress() {
				let parameter = {
					id: this.delId, // id
				}
				this.$post(this.api.deleteAddress, parameter, 'post', { token: uni.getStorageSync('token') }).then((res) => {
					uni.showToast({
						title: '地址删除成功',
						icon: 'none',
						duration: 3000,
						position: 'bottom'
					});
					/** 关闭弹框 */
					this.dialogShow = false;
					/** 刷新列表 */
					this.getAddressList();
				}).catch((err) => {
					console.log(err)
				})
			},
			/** 跳转至地址详情*/
			handleToAddressDetails(item) {
				uni.navigateTo({
					url:`../addAddress/index?btn=3&formInline=${JSON.stringify(item)}`
				})
			}
		},
	} 
</script>

<style lang="less" scoped>
	@import  "@/asset/less/base.less";
	page, .address_main {
		background: #EFEFEF;
		// height: 100vh;
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.address_main {
		.addres_list {
			background-color: #fff;
			padding: 38rpx 30rpx 0rpx;
			margin-bottom: 14rpx;
			.consignee_info {
				padding-bottom: 24rpx;
				color: #3c3c3c;
				font-size: 28rpx;
			}
			.consignee_address {
				font-size: 26rpx;
				color: #AAAAAA;
				line-height: 37rpx;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #D7D7D7;
			}
			.operation {
				height: 76rpx;
				line-height: 76rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view {
					font-size: 24rpx;
					color: #3C3C3C;
					// display: inline-block;
				}
				image {
					vertical-align: middle;
					margin-right: 20rpx;
				}
				.set_default_address {
					display: flex;
					margin-right: 288rpx;
					align-items: center;
					image {
						height: 27rpx;
						width: 27rpx;
					}
					.text-color{
						color: #D1A764;
					}
				}
				.edit_address {
					
					image {
						height: 27rpx;
						width: 27rpx;
					}
				}
				.delete_address {
					margin-left: 50rpx;
					image {
						height: 28rpx;
						width: 23rpx;
					}
				}
				.operation-right{
					display: flex;
					align-items: center;
				}
			}
		}
		.addres_list:last-child {
			margin-bottom: 105rpx;
		}
		.addres_list_main {
			border-bottom: 1px solid #E9E9E9;
		}
		.btns1 {
			margin: 40rpx 60rpx 40rpx 60rpx;
		}
	}
	.putaway_commodity {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		.putaway_commodity_main {
			width: 632rpx;
			height: 290rpx;
			margin: 336rpx auto 0;
			text-align: center;
			border-radius: 5rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.putaway_commodity_explain {
				color: #000;
				font-size: 36rpx;
				padding: 73rpx 0 74rpx 0;
				text {
					color: #E84E4E;
				}
			}
			.putaway_commodity_btns {
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 93rpx;
				text {
					border-radius: 5rpx;
					display: inline-block;
				}
				text:first-child {
					border: 2rpx solid #E5E5E5;
					width: 173rpx;
					height: 58rpx;
					line-height: 58rpx;
					color: #999;
				}
				text:last-child {
					width: 175rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #fff;
					background: linear-gradient(90deg, #CFA461 0%, #DCBB7E 100%);
				}
			}
		}
	}
</style>
